<template>
    <div>
        <content-head>
            <div class="project-head">
                <div class="left">
                    <div class="project-round">
                        <span></span>
                    </div>
                    <div class="project-detail">
                        <p style="font-size: 800">个人项目</p>
                        <p>这里将展示你的个人项目，当然也包括协同项目</p>
                    </div>
                </div>
                <div class="project-switch">
                    <ButtonGroup>
                        <Button :type="flag === 0?'primary':'default'" @click="flag = 0">全部</Button>
                        <Button :type="flag === 1?'primary':'default'" @click="flag = 1">我创建的</Button>
                        <Button :type="flag === 2?'primary':'default'" @click="flag = 2">我加入的</Button>
                    </ButtonGroup>
                </div>
            </div>
        </content-head>
        <div class="project-content">
            <project-detail v-for="item in projectList" :key="item.id" :project="item" :searchFlag="flag"></project-detail>
        </div>
        <div class="project-plus" v-intro="'准备好你的数据库，从这里开始创建你的项目'">
            <Icon type="plus-circled"  class="plus-icon" @click="editProject"></Icon>
        </div>
        <Modal
                v-model="showTips"
                title="引导">
            <p>确定退出操作引导吗？</p>
            <div slot="footer">
                <Checkbox v-model="tipsFlag">不再显示引导</Checkbox>
                <Button type="text" @click="cancelModal">取消</Button>
                <Button type="primary" @click="modalOK">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import ProjectDetail from './projectDetail';
    import ContentHead from './contentHead';
    import { mapGetters } from 'vuex';
    export default {
        data(){
          return {
              param : {
                  collection: {
                      filters: []
                  },
                  orders: [
                      {
                          fieldName: 'createdAt',
                          orderType: 'DESC'
                      }
                  ],
                  pageParms: {
                      pageIndex: 0,
                      pageSize: 10
                  }
              },
              projectList:[],
              flag: 0,
              intro: null,
              currentStep: 0,
              showTips: false,
              tipsFlag: true
          };
        },
        components:{
            ProjectDetail,
            ContentHead
        },
        methods:{
            editProject(){
                this.$router.push('/main/new');
            },
            modalOK(){
                this.showTips = false;
                let loginInfo = this.$store.getters.loginInfo;
                loginInfo.flag = this.tipsFlag?'0':'1';
                window.localStorage.loginInfo = JSON.stringify(loginInfo);
                this.$store.commit('CHANGELOGININFO',loginInfo);
            },
            cancelModal(){
                this.showTips = false;
                if (this.currentStep === 0) {
                    this.intro.refresh().start();
                } else {
                    this.intro.goToStep(this.currentStep).start();
                }
            }
        },
        created(){
            let _this = this;
            this.intro = this.$intro();
            this.intro.setOptions({
                skipLabel: '跳出',
                nextLabel: '下一步',
                prevLabel: '上一步',
                doneLabel: '结束',
                exitOnOverlayClick: false
            });
            this.intro.onchange(function () {
                _this.currentStep = this._currentStep? this._currentStep: 0;
            });
            this.intro.onexit(function () {
                _this.showTips = true;
                _this.tipsFlag = true;
            });
            this.$http.post('/codegen/api/v1/projects', this.param).then((response) => {
                if (response.status === 200 && response.data.data) {
                    this.projectList = response.data.data;
                    this.$nextTick(()=>{
                        if (this.$store.getters.loginInfo.flag === '1') {
                            this.intro.start();
                        }
                    });
                }
            });
        },
        computed:{
            ...mapGetters([
                'loginInfo'
            ])
        },
        watch:{
            'loginInfo.flag': function (val) {
                if (val === '1') {
                    this.intro.start();
                }
            }
        }
    };
</script>

<style lang="scss" scoped>
    .project-content {
        width: 1024px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
    }

    .project-plus{
        position: fixed;
        right: 16px;
        bottom: 22px;
        .plus-icon{
            font-size: 42px;
            color: #2d8cf0;
            cursor: pointer;
            &:before{
                border-radius: 50%;
                box-shadow: 2px 1px 4px rgba(45, 140, 240, 0.2);
            }

            &:hover{
                color: #57a3f3;
            }
        }
    }
</style>